<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-08 
 -->


<template>
  <div class="flex flex-row fixed bottom-0 left-0 z-10 w-full h-12 border-t border-gray-400 bg-white">
    <div class="flex items-center justify-center w-1/5 h-full" v-for="(item, index) in tabData" :key="index">
      <tab-icon :iconText = "item.iconText" :path = "item.path" >
        {{ item.tabText }}
      </tab-icon>
    </div>
  </div>
</template>

<script lang='ts'>
  import { defineComponent, reactive, toRefs } from 'vue'
  import TabIcon from './Icon.vue'
  import tabData from '@/datas/tab'
  export default defineComponent({
    name: '~Index',
    components: {
      TabIcon
    },
    setup(props, {emit, slots}) {
      const state = reactive({
      tabData
    })
     return {
       ...toRefs(state)
      }
     }
  })

</script>

<style lang='css' scoped>

</style>
